<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>menu</title>
    <link rel="stylesheet" href="../lib/layui-v2.6.3/css/layui.css" media="all">
    <link rel="stylesheet" href="../css/public.css" media="all">
    <style>
        .layui-btn:not(.layui-btn-lg ):not(.layui-btn-sm):not(.layui-btn-xs) {
            height: 34px;
            line-height: 34px;
            padding: 0 8px;
        }
    </style>
    <script src="../js/global.js"></script>
    <link rel="stylesheet" href="../layui/css/treeTable.css">
</head>
<body>
<div class="layuimini-container">
    <div class="layuimini-main">
<!--        <blockquote class="layui-elem-quote">-->
<!--            Layui的树形表格treeTable，支持异步加载(懒加载)、复选框联动、折叠状态记忆。<br>-->
<!--            <a href="https://gitee.com/whvse/treetable-lay" target="_blank" class="layui-btn layui-btn-danger">treetable-lay</a>-->
<!--        </blockquote>-->
        <div>
            <div class="layui-btn-group">
                <button class="layui-btn" id="btn-expand">全部展开</button>
                <button class="layui-btn layui-btn-normal" id="btn-fold">全部折叠</button>
                <button class="layui-btn layui-btn-normal ops" ops="modele:addOne" id="btn-addOne">添加一级节点</button>
            </div>
            <table id="munu-table" class="layui-table" lay-filter="munu-table"></table>
        </div>
    </div>
</div>
<!-- 添加子节点的表单 -->
<form id="addSonLayer" class="layui-form" action="" onsubmit="return false;" style="display:none">
    <br>
    <div class="layui-form-item">
        <label class="layui-form-label"><span style="color: red">*</span>类型名称</label>
        <div class="layui-input-inline">
            <input type="text" name="name" id="A_typeBlurEvent" required  lay-verify="required" placeholder="请输入类型名称" autocomplete="off" class="layui-input">
        </div>
        <input type="hidden" id="parentId" name="parentId">

    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">模块路径</label>
        <div class="layui-input-inline">
            <input type="text" name="path" placeholder="请输入模块路径" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label"><span style="color: red">*</span>权重</label>
        <div class="layui-input-inline">
            <input type="text" name="weight"lay-verify="number|operationCount"  autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">权限标识</label>
        <div class="layui-input-inline">
            <input type="text" name="ops"  autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
    <label class="layui-form-label">分类:</label>
        <div class="layui-input-inline">
            <select  name="type">
                <option value="c">菜单</option>
                <option value="n">按钮</option>
            </select>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label"><a href="https://fontawesome.dashgame.com/" target="_blank" style="color:blue">图标</a></label>
        <div class="layui-input-inline">
            <input type="text" name="icon"  autocomplete="off" class="layui-input" placeholder="更多图标请点击，记得要加fa 前缀哟" style="width: 250px">
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn" lay-submit lay-filter="addSonBtn">添加</button>
            <button type="reset" id="A_reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
    </div>
</form>
<!--添加一级节点-->
<form id="addOneForm" class="layui-form" action="" onsubmit="return false;" style="display:none">
    <br>
    <div class="layui-form-item">
        <label class="layui-form-label"><span style="color: red">*</span>类型名称</label>
        <div class="layui-input-inline">
            <input type="text" name="name" lay-verify="required" placeholder="请输入类型名称" autocomplete="off" class="layui-input">
        </div>
        <input type="hidden" name="parentId" value="-1">
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">模块路径</label>
        <div class="layui-input-inline">
            <input type="text" name="path" placeholder="请输入模块路径" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label"><span style="color: red">*</span>权重</label>
        <div class="layui-input-inline">
            <input type="text" name="weight"lay-verify="number|operationCount"  autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">权限标识</label>
        <div class="layui-input-inline">
            <input type="text" name="ops" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">分类:</label>
        <div class="layui-input-inline">
            <select  name="type">
                <option value="c">菜单</option>
                <option value="n">按钮</option>
            </select>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label"><a href="https://fontawesome.dashgame.com/" target="_blank" style="color:blue">图标</a></label>
        <div class="layui-input-inline">
            <input type="text" name="icon" autocomplete="off" class="layui-input" placeholder="更多图标请点击，记得要加fa 前缀哟" style="width: 250px">
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn" lay-submit lay-filter="addOneBtn">添加</button>
            <button type="reset" id="A_reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
    </div>
</form>

<!-- 修改的表单 -->
<form id="editForm" lay-filter="editForm" class="layui-form" action="" onsubmit="return false;" style="display:none">
    <br>
    <input type="hidden" name="id" />
    <div class="layui-form-item">
        <label class="layui-form-label">类型名称</label>
        <div class="layui-input-inline">
            <input type="text" name="name" id="U_typeBlurEvent" required  lay-verify="required" placeholder="请输入类型名称" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">模块路径</label>
        <div class="layui-input-inline">
            <input type="text" name="path" placeholder="请输入模块路径" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">权重</label>
        <div class="layui-input-inline">
            <input type="text" name="weight" lay-verify="number|operationCount"  autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">权限标识</label>
        <div class="layui-input-inline">
            <input type="text" name="ops" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">分类:</label>
        <div class="layui-input-inline">
            <select  name="type">
                <option value="c">菜单</option>
                <option value="n">按钮</option>
            </select>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label"><a href="https://fontawesome.dashgame.com/" target="_blank" style="color:blue">图标</a></label>
        <div class="layui-input-inline">
            <input type="text" name="icon"  autocomplete="off" class="layui-input" placeholder="更多图标请点击，记得要加fa 前缀哟" style="width: 250px">
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn" lay-submit lay-filter="editSubmit">修改</button>
            <button type="reset" id="U_reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
    </div>
</form>
<!-- 操作列 -->
<!-- 操作列 -->
<script type="text/html" id="auth-state">
    <a class="layui-btn layui-btn-primary layui-btn-xs ops"ops="modele:addSon" lay-event="addSon">添加子节点</a>
    <a class="layui-btn layui-btn-primary layui-btn-xs ops"ops="modele:edit" lay-event="edit">修改</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs ops"ops="modele:del" lay-event="del">删除</a>
</script>

<script src="../lib/layui-v2.6.3/layui.js" charset="utf-8"></script>
<script src="../js/lay-config.js?v=1.0.4" charset="utf-8"></script>
<script>
    layui.use(['table','layer','form','upload','laydate','util', 'treetable'], function () {
        var table = layui.table;
        var layer = layui.layer;
        var form = layui.form;
        var $ = layui.$;
        var upload = layui.upload;
        var laydate = layui.laydate;
        var util = layui.util;
        var treetable = layui.treetable;


        // 渲染表格
        var renderTable = function () {
            layer.load(2);
            treetable.render({
                treeColIndex: 1,
                treeSpid: -1,
                treeIdName: 'id',
                treePidName: 'parentId',
                elem: '#munu-table',
                url: globalData.server + 'modules?token='+globalData.token,
                // headers:{token:globalData.token},
                page: false,
                cols: [[
                    {field: 'id', minWidth: 80, title: 'ID'},
                    {field: 'name', title: '权限名称',width: 200},
                    {field: 'ops', title: '权限标识',width: 150},
                    {field: 'path', title: '模块路径',width: 150},
                    {field: 'weight', align: 'center', title: '权重'},
                    {
                        field: 'type', width: 80, align: 'center', templet: function (d) {
                            if (d.type==("n")) {
                                return '<span class="layui-badge layui-bg-gray" >按钮</span>';
                            } else {
                                return '<span class="layui-badge-rim layui-bg-blue">菜单</span>';
                            }
                        }, title: '类型'
                    },
                    {templet: '#auth-state', width: 300, align: 'center', title: '操作'}
                ]],
                done: function () {
                    layer.closeAll('loading');
                    var myOps = sessionStorage.getItem("btnPermission");
                    $(".ops").each(function(){
                        if(myOps.indexOf($(this).attr('ops'))==-1){
                            $(this).hide();
                        }
                    });
                }
            });
        }
        renderTable();
        $('#btn-expand').click(function () {
            treetable.expandAll('#munu-table');
        });

        $('#btn-fold').click(function () {
            treetable.foldAll('#munu-table');
        });
        $('#btn-addOne').click(function () {
            $("#addOneForm")[0].reset();
            //打开新增的弹层
            layer.open({
                type:1,
                title: '您正在新增产品信息',
                content: $('#addOneForm'),
                area: ['500px', '500px']
            });
        });

        //监听工具条
        table.on('tool(munu-table)', function (obj) {
            var data = obj.data;
            var layEvent = obj.event;

            if (layEvent === 'del') {
                layer.confirm('真的删除行么', function(index){
                    //点击确定按钮的时候才会进来
                    var id = data.id;
                    var parentId=data.parentId;
                    //在删除前先查找该类型下是否有子类型链接，如有就不让删除
                    $.post(globalData.server+"modules/findIsHvaeSon?id="+id+ "&token=" + globalData.token,{},function(res){
                        if(res){//商品类型下有子商品类型链接就提示不能删除
                            layer.msg("该类型下有子类型连接，无法直接删除！");
                        }else{//没有内容就可进一般判断
                            $.post(globalData.server+"modules/findIsHaveModules?id="+id + "&token=" + globalData.token,{},function(res){
                                if(res){//为true说明该类型下有商品提示不能删除
                                    layer.msg("该模块已被分配，不能直接删除！");
                                }else{//类型下没有商品链接就可进行删除
                                    $.post(globalData.server+"modules/deleteModules?id="+id + "&token=" + globalData.token,{
                                    },function(res){
                                        if(res){
                                            layer.msg("删除成功");
                                            $("#btnReload").click();
                                            layer.closeAll('page');
                                            renderTable();
                                        }else{
                                            layer.msg("删除失败");
                                            table.reload('munu-table');
                                            $("#btnReload").click();
                                            layer.closeAll('page');
                                        }
                                    },'json');
                                }

                            });
                        }

                    });

                });
            } else if (layEvent === 'edit') {
                //数据的回显
                form.val("editForm", data);
                //打开弹层
                layer.open({
                    type:1,
                    title: '您正在修改编号【'+ data.id + '】的信息',
                    content: $('#editForm'),
                    area: ['500px', '500px']
                });
            }else if (layEvent === 'addSon') {
                //添加子节点
                $("#addSonLayer")[0].reset();
                $("#parentId").val(data.id);
                // console.log(data.id);
                //打开新增的弹层
                layer.open({
                    type:1,
                    title: '您正在为【'+data.id+'】添加子节点',
                    content: $('#addSonLayer'),
                    area: ['500px', '500px']
                });
            }
        });




        //修改弹层的提交按钮
        form.on('submit(editSubmit)', function(data) {
            $.ajax({
                type: 'post', 					//提交方式get或post
                url: globalData.server+"modules/updateModules", 	//提交路径
                data: $("#editForm").serialize(), 	//参数
                headers:{token:globalData.token},
                dataType: 'json', 					//返回的数据类型
                success: function(res) { 		//提交成功
                    layer.closeAll();			//关闭弹层
                    layer.alert(res.msg);		//提示信息
                    renderTable();
                },
                error: function() { //提交失败
                    alert("系统异常！！")
                }
            });
            return false;
        });

        //新增弹层的提交按钮   子节点
        form.on('submit(addSonBtn)', function(data) {
            $.ajax({
                type: 'post', 					//提交方式get或post
                url:  globalData.server+"modules/insertModules",	 					//提交路径
                data: $("#addSonLayer").serialize(),
                headers:{token:globalData.token},
                dataType: 'json', 				//返回的数据类型
                success: function(res) { 		//提交成功
                    layer.closeAll();			//关闭弹层
                    layer.msg(res.msg);		//提示信息
                    renderTable();
                },
                error: function() { //提交失败
                    alert("系统异常！！")
                }
            });
            return false;
        });

        //新增弹层的提交按钮   父节点
        form.on('submit(addOneBtn)', function(data) {
            $.ajax({
                type: 'post', 					//提交方式get或post
                url:  globalData.server+"modules/insertModules",	 					//提交路径
                data: $("#addOneForm").serialize(),
                headers:{token:globalData.token},
                dataType: 'json', 				//返回的数据类型
                success: function(res) { 		//提交成功
                    layer.closeAll();			//关闭弹层
                    layer.alert(res.msg);		//提示信息
                    table.reload('proTable'); 	// 修改后要刷新表格
                    renderTable();
                },
                error: function() { //提交失败
                    alert("系统异常！！")
                }
            });
            return false;
        });




        form.verify({
            // 方式一
            // value：表单的值、item：表单的DOM对象
            // operationCount: function(value, item){
            //     if( /^[1-9]\d*$/) {
            //         return '必须为整数！！！'
            //     }
            // }
            // // 方式二
            // // 数组的两个值分别代表：[正则匹配、匹配不符时的提示文字]
            operationCount: [
                /^[+]{0,1}(\d+)$/,
                '必须为整数！！！'
            ]
        });



    });
</script>
</body>
</html>